<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>简介与评论</title>
    
     <link rel="stylesheet" href="../../css/amazeui.min.css">
     <link rel="stylesheet" href="css/shop.css">
    
    <style type="text/css">
        
        ul, li {
		    overflow: hidden;
		    list-style: none;
		}

        
    	
    	
    </style>
</head>
<body>


<div id='header' class="am-g am-topbar-fixed-top" >
   
   <div class="am-u-sm-12" style="padding: 0px;height: 50px">
	<div  onclick="api.closeWin();"  class="am-u-sm-2" style="margin-top:12px;padding-left: 17px">
		<img  src="images/arr-l.png" style="height:14px;height: 18px;"/>
	</div> 
	<div class="am-u-sm-8 til" style="padding-top:13px;text-align:center;">
		<h1>简介与评论</h1>
	</div>
	<div class="am-u-sm-2" style="font-size: 20px;margin-top:10px;color:white;text-align:center;">

   </div>
   
   </div>
   
   
   <div class="am-u-sm-12" style="padding: 0px">
   <div class="lui-tab" >
        <ul class="lui-tab-nav" id="tab">
            <li class="active" name="prodetail">简介</li>
            <li name="procomment">评论</li>
        </ul>
    </div>
   </div>
   
</div>


<div class="am-g" style="margin-top: 100px" id="tabmain">
 
<!--简介-->
<div class="am-u-sm-12 tabcontent activeTab" style="padding:0px;" id="prodetail">

</div>
 
 
 
 
 <!--评论-->
<div class="am-u-sm-12 tabcontent" id="procomment">
 
	
 
 </div>
 
 
 
 
 
</div>


	
</body>
<script type="text/javascript" src="../../script/api.js"></script>



<script type="text/javascript">
    apiready = function () {
    
        api.parseTapmode();
        
        var $content=$api.byId('tabmain');   //内容区
        var $tabcontent = $api.domAll($content, '.tabcontent');
        
        //选项卡
        var tab = $api.domAll("#tab li");
        for(var i in tab){
            $api.addEvt(tab[i], 'click', function(){
                $api.removeCls($api.dom("#tab li.active"),'active');
                $api.addCls(this,'active');              //选项卡切换
                
                for (var i = 0; i < $tabcontent.length; i++) {
			        $api.removeCls($tabcontent[i], 'activeTab');
			    }
			    var tabid=$api.attr(this, 'name');
                $api.addCls($api.byId(tabid), 'activeTab');      //内容切换
                
            });
            
        }
        
        
        var  data= api.pageParam.data;  
        
        $api.html($api.byId('prodetail'), data.prodesc);
        
        var html="";
        if(data.comments.length>0){
          for(var i=0;i<data.comments.length;i++){
	           html+='<div style="font-size:14px;">';
		           html+='<div class="am-u-sm-12" style="padding:5px 0px;">';
			           html+='<div class="am-u-sm-6">';
			           for(var j=0;j<data.comments[i].satisfaction;j++){
			               html+='<i class="am-icon-star" style="color: #fc7d0d"></i>';
			           }
			           html+='</div>';
			           html+='<div class="am-u-sm-6" style="padding:0px; font-size:14px;color:gray">';
			           html+=data.comments[i].nickName+'&nbsp;&nbsp;&nbsp;'+data.comments[i].commentTime;
			           html+='</div>';
		           html+='</div>';
		           html+='<div class="am-u-sm-12 am-text-truncate" style="border-bottom:1px solid #eee;">';
		               html+=data.comments[i].content;
		           html+='</div>';
		        html+='</div>';
	           
          }
        
        }else{
           html+=' <div class="am-u-sm-12 am-text-center"><br/>暂无评论...</div>';
        }
        
        $api.html($api.byId('procomment'), html);
     
     
    }
</script>



</html>